<template>
    <el-scrollbar style="background: #f8fafe;">
        <div class="test-container">
            <div class="header-part">
                <div class="header-content">
                    <div class="left-part">
                        <div class="left-title">工具箱</div>
                        <div class="logo-part">
                            <div class="logo">奇迹秀首页 ></div>
                        </div>
                    </div>
                    <div class="right-part">
                        <Icon name="Search" icon-size="2em" class="global-icon" title="搜索" />
                    </div>
                </div>
            </div>
            <div class="left-nav">
                <li class="nav-li" :class="{ active: activeFlag == item.title }" v-for="item in navList" :key="item.id"
                    @click="handleSelect(item)">
                    {{ item.title }}
                </li>
            </div>
            <div class="content-part">
                <div class="content-item" v-for="item in toolList" :key="item.id">
                    <div h-full w-full>
                        <div class="header">
                            <div class="header-title">{{ item.title }}</div>
                            <div class="header-warn">
                                <Icon name="WarningFilled" style="line-height: 0;margin-right:5px" color="red" />
                                <div>安装出错，无法安装？</div>
                            </div>
                        </div>
                        <div class="tool-part">
                            <div class="tool" v-for="tool in item.list">
                                <div style="padding:0 10px;">
                                    <div class="tool-img"
                                        :style="{ backgroundImage: `linear-gradient(45deg, ${tool.color[0]}, ${tool.color[1]})` }">
                                        <img src="@/assets/images/1-1-Omi.png" alt="" h-full>
                                    </div>
                                    <div class="tool-title">{{ tool.title }}</div>
                                    <div class="tool-introduct">{{ tool.introduction }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="aside-nav">
                <li v-for="item in toolList" mb-2 :key="item.id">
                    <div class="aside-li">
                        <span style="margin-right: 10px;" block>{{ item.title }}</span>
                    </div>
                </li>
            </div>
        </div>
    </el-scrollbar>
</template>

<script setup lang="ts" name="qjTools">
import Icon from '@/components/icon/index.vue'

const navList = [
    { title: '创意工具', id: 1 },
    { title: '常用工具', id: 2 },
    { title: '效率工具', id: 3 },
    { title: '效率插件', id: 4 },
    { title: '创意导航', id: 5 },
    { title: '广告资讯', id: 6 },
]

const toolList = [
    {
        title: '视频剪辑', list: [
            { title: 'Omi录屏专家', introduction: '屏幕录像编辑工具', color: ['#323232', '#7c8184'], img: '@/assets/images/1-1-Omi.png' },
            { title: 'Omi录屏专家', introduction: '屏幕录像编辑工具', color: ['#323232', '#7c8184'], img: '@/assets/images/1-1-Omi.png' },
            { title: 'Omi录屏专家', introduction: '屏幕录像编辑工具', color: ['#323232', '#7c8184'], img: '@/assets/images/1-1-Omi.png' },
            { title: 'Omi录屏专家', introduction: '屏幕录像编辑工具', color: ['#323232', '#7c8184'], img: '@/assets/images/1-1-Omi.png' }
        ],
        id: 1
    },
    {
        title: '休闲游戏', list: [
            { title: 'Omi录屏专家', introduction: '屏幕录像编辑工具', color: ['#323232', '#7c8184'], img: '@/assets/images/1-1-Omi.png' },
            { title: 'Omi录屏专家', introduction: '屏幕录像编辑工具', color: ['#323232', '#7c8184'], img: '@/assets/images/1-1-Omi.png' },
            { title: 'Omi录屏专家', introduction: '屏幕录像编辑工具', color: ['#323232', '#7c8184'], img: '@/assets/images/1-1-Omi.png' },
            { title: 'Omi录屏专家', introduction: '屏幕录像编辑工具', color: ['#323232', '#7c8184'], img: '@/assets/images/1-1-Omi.png' }
        ],
        id: 2
    }
]

const activeFlag = ref('创意工具')
const handleSelect = (li: any) => {
    activeFlag.value = li.title
}
</script>

<style scoped lang="scss">
.test-container {
    position: relative;

    .header-part {
        height: 100px;
        width: 100%;

        .header-content {
            width: 80%;
            height: 100%;
            margin: 0 90px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .left-part {
                display: flex;

                .left-title {
                    font-size: 30px;
                    font-weight: 500;
                    margin-right: 20px;
                    padding-top: 3px;
                }

                .logo-part {
                    transition: all .5s;
                    .logo {
                        width: 120px;
                        height: 30px;
                        border-radius: 40px;
                        background-color: #dee2e8;
                        text-align: center;
                        line-height: 30px;
                        color: #594e4e;
                        animation: logoqj 2.5s infinite;
                        font-size: 12px;

                    }


                    @keyframes logoqj {
                        0% {
                            transform: rotate(-4deg);
                        }

                        50% {
                            transform: rotate(4deg);
                        }

                        100% {
                            transform: rotate(-4deg);
                        }
                    }
                }
                .logo-part:hover{
                    transform: scale(1.2);
                    .logo {
                        color: black;
                        background-image: linear-gradient(45deg, #1affda, #8affda);
                    }
                }
            }
        }
    }

    .left-nav {
        width: 150px;
        background-color: white;
        border-radius: 10px;
        position: absolute;
        top: 100px;
        left: 100px;
        box-shadow: 0 0 8px 0 rgb(0 0 0 / 2%);

        .nav-li {
            width: 150px;
            font-size: 15px;
            height: 75px;
            text-align: center;
            line-height: 75px;
            border-bottom: 1px solid #f1f3f7;
            list-style: none;
            cursor: pointer;
            transition: all .4s;
            color: #a0a0a0;

            &.active {
                color: black;
                background-color: white;
            }
        }

        .nav-li:hover {
            color: #13e0bc;
            font-size: 17px;
            box-shadow: 0 30px 28px -16px rgb(0, 0, 0, 0.26);
            transform: translate(0, 1px);
        }
    }

    .content-part {
        width: 70%;
        position: absolute;
        top: 100px;
        left: 270px;
        background-color: #f8fafe;

        .content-item {
            padding: 25px;
            background-color: white;
            border-radius: 10px;
            margin-bottom: 20px;

            .header {
                display: flex;
                justify-content: space-between;
                font-size: 12px;
                margin-bottom: 20px;

                .header-title {
                    font-size: 15px;
                    border-left: 4px solid #2affda;
                    width: 80px;
                    text-align: center;
                }

                .header-warn {
                    display: flex;
                    align-items: center;
                }
            }

            .tool-part {
                width: 100%;
                display: flex;
                flex-wrap: wrap;

                .tool {
                    margin-bottom: 27px;
                    width: 33.3%;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    flex-shrink: 0;

                    .tool-img {
                        height: 108px;
                        border-radius: 10px;
                        box-shadow: 0 0 8px 0 rgb(0 0 0 / 2%);
                        margin-bottom: 6px;
                        transition: all .4s ease;

                        img {
                            display: block;
                            width: auto;
                            margin: 0 auto;
                            border-radius: 6px;
                            transition: all .4s;
                        }
                    }

                    .tool-img:hover {
                        box-shadow: 0 30px 28px -16px rgb(0, 0, 0, 0.26);
                        transform: translate(0, -4px);

                        img {
                            transform: scale(1.22) rotate(13deg);
                        }
                    }

                    .tool-title {
                        font-size: 14px;
                        font-weight: 500;
                        color: #171717;
                        height: 20px;
                    }


                    .tool-introduct {
                        font-size: 12px;
                        font-weight: 200;
                        color: #a0a0a0;
                    }
                }
            }
        }
    }

    .aside-nav {
        position: absolute;
        right: 0px;
        top: 150px;

        li {
            list-style: none;
            position: relative;
            height: 40px;
        }

        .aside-li {
            position: absolute;
            top: 0;
            right: 0;
            background-color: white;
            width: 36px;
            overflow: hidden;
            border-radius: 70px 0 0 70px;
            border: 1px dashed rgb(185 185 185 / 29%);
            height: 40px;
            line-height: 40px;
            border-right: none;
            padding-left: 20px;
            transform: translate(0, 1px);
            box-shadow: rgb(0, 0, 0, 0.51) 0 0 0 0;
            font-size: 13px;
            transition: all .3s;

        }

        .aside-li:hover {
            box-shadow: 0 30px 28px -16px rgb(0, 0, 0, 0.26);
            width: 80px;
            color: #13e0bc;
        }
    }
}</style>